/*eslint-disable*/
import React from "react";
import {
  Checkbox,
  Input,
  InputNumber,
  Radio,
  Select,
  Tabs,
  Table,
  Icon,
  Tooltip,
  Switch,
  Button,
  Form,
  Popconfirm,
  message,
  Upload,
  Divider,
  Modal,
  Spin
} from "antd";
import {getUuid, openNotificationWithIcon} from "utils/comm";
import Zcon from "@cbd/icon";
import {
  // formatFormParameters,
  isFormReferenced,
} from "components/flowdetailpannel/FlowParameters";
// import UserTaskSelector from "./UserTaskSelector";
import BackComment from "components/flowdetailpannel/BackComment";
import VoteComment from "components/flowdetailpannel/VoteComment";

import UserTaskSelectorRadio from "./UserTaskSelectorRadio";
import DuedateSetting from "./DuedateSetting";
import CarbonCopySetting from "./CarbonCopySetting";
// import VariablesSetting from "./VariablesSetting";
import RequiredComment from "./RequiredComment";
import CustomTitle from "./CustomTitle";
import NodeConfig from "./NodeConfig";
import UserTaskObject from "./UserTaskObject";
import BackConfig from "./BackConfig";
import styles from "./Pannel.less";
import udStyles from "./UserTaskDetail.less";
import ForcePickComment from "components/flowdetailpannel/ForcePickComment";
import AutoGetLastCandidate from "components/flowdetailpannel/AutoGetLastCandidate";
import IsChooseCandidateUser from "components/flowdetailpannel/IsChooseCandidateUser";
import IsCleanCandidateUserSetting from "components/flowdetailpannel/IsCleanCandidateUserSetting";
import IsConfigCheckPoint from "components/flowdetailpannel/IsConfigCheckPoint";
import ManualSelectNextNode from "components/flowdetailpannel/ManualSelectNextNode";

const {TabPane} = Tabs;
// const RadioGroup = Radio.Group;
const {Option} = Select;
const {TextArea} = Input;

const authNodes = [
  // {
  //   key: "urge",
  //   name: "催办",
  //   desc: "启用后允许流程发起人在一定条件下催促处理人处理流程",
  // },
  {
    key: "terminateProcess",
    name: "关闭流程",
    config: '配置后处理',
    desc: "启用后允许流程处理人关闭流程",
  },
  {
    key: "cancel",
    name: "撤回",
    desc: "启用后允许流程发起人撤回流程",
  },
  {
    key: "signIn",
    name: "签收",
    desc: "启用后允许流程处理人先签收再处理流程，避免多人处理出现抢单",
  },
  {
    key: "addSignature",
    name: "加签",
    config: '配置后处理',
    desc: "启用后允许流程处理人临时增加其他处理人处理流程",
  },
  // {
  //   key: "minusSignature",
  //   name: "减签",
  //   desc: "启用后允许流程处理人临时取消某⼈参与决策的资格",
  // },
  {
    key: "delegate",
    name: "委派",
    config: '配置后处理',
    desc:
      "启用后将任务节点分给其他⼈处理，等其他⼈处理好之后，委派任务会⾃动回到委派⼈的任务中",
  },
  // {
  //   key: "turnRead",
  //   name: "转阅",
  //   desc: "启用后将任务节点分给其他⼈转阅",
  // },
  {
    key: "transfer",
    name: "转办",
    config: '配置后处理',
    desc: "启用后允许流程处理人将流程转给其他人处理",
  },
  // {
  //   key: "circulation",
  //   name: "流转",
  //   desc: "启用后允许流程处理人可以将流程流转到其他环节办理",
  // },
  // {
  //   key: "delay",
  //   name: "延期",
  //   // config: '配置', // 配置选项
  //   desc: "启用后允许流程处理人延长办理时间",
  // },
  // {
  //   key: "rollback",
  //   name: "退回",
  //   desc: "启用后允许流程处理人退回至上一节点或第一个节点",
  // },
  {
    key: "rollbackToPre",
    name: "退回到上一节点",
    config: '配置后处理',
    desc: "启用后允许流程处理人退回至上一节点",
  },
  {
    key: "rollbackToFirst",
    name: "退回到第一个节点",
    config: '配置后处理',
    desc: "启用后允许流程处理人退回至第一个节点",
  },
  {
    key: "rollbackToAny",
    name: "退回到任意节点",
    desc: "需要配合“排他网关”和流程画线在业务层进行处理",
  },
  {
    key: "takeBack",
    name: "拿回",
    config: '配置后处理', // 配置选项
    desc: "启用后在下个节点未读的情况下以允许撤回到当前节点",
  },
  {
    key: "reissue",
    name: "补发",
    // config: '配置', // 配置选项
    desc: "启用后当前节点完成后，可对下一会签节点进行加签操作",
  },
  // {
  //   key: "stop",
  //   name: "终止",
  //   desc: "启用后允许流程处理人填写终止原因终止掉流程",
  // },
  // {
  //   key: "nextNode",
  //   name: "指定下一节点",
  //   desc: "启用后可指定下⼀节点",
  // },
  {
    key: "nextNodeHandler",
    name: <span> 指定流程节<br/>点处理人 </span>,
    config: '配置', // 配置选项
    desc: "启用后可指定流程节点处理人",
  },
  {
    key: "ignoreGateway",
    name: "获取后续节点时忽略网关",
    desc: "启用后获取后续节点时忽略网关，返回后续所有节点",
  },
  {
    key: "readHandle",
    name: "阅办",
    desc: "向流程外人员发送必须处理的通知",
  },
  {
    key: "veto",
    name: "否决",
    desc: "终止流程",
  },
];

const unCheck = false;
const check = true;
const defaultCondition="${nrOfPassInstances/nrOfInstances>=1}";

const formatPercentValue = (v, p = 2) => parseFloat(v.toFixed(p));
// nrOfCompletedInstances>=18
// nrOfCompletedInstances/nrOfInstances>=0.15
const extractHQCondition = v => {
  const cond = {
    // subject: undefined,
    // predicate: undefined,
    subject: "nrOfPassInstances/nrOfInstances",
    predicate: ">=",
    object: 100,
  };
  const result = /^\$\{([a-zA-Z]+)(\/[^>]+)?>(=)?(.+)\}$/g.exec(v);
  if (!v || !result) {
    return cond;
  }
  cond.subject = result[2]
    ? "nrOfPassInstances/nrOfInstances"
    : "nrOfPassInstances";
  cond.predicate = result[3] ? ">=" : ">";
  cond.object = parseFloat(result[4]);
  if (result[2]) {
    // cond.object *= 100;
    cond.object = formatPercentValue(cond.object * 100);
  }
  return cond;
};

const formItemLayout = {
  labelCol: {span: 6},
  wrapperCol: {span: 18},
};

const formItemLayout2 = {
  labelCol: {span: 6},
  wrapperCol: {span: 14},
};

@Form.create()
class UserTaskDetail extends React.Component {
  openNotificationWithIcon = openNotificationWithIcon.bind(this);

  constructor(props) {
    super(props);

    this.state = {
      activeKey: "1",
      label: "",
      description: "",
      overrideid: "",
      // url: "",
      eventConfigData: [],
      // ziduanList: [],
      // wjList: [],
      // filliuList: [],
      // formname: "",
      filListLocal: [],
      selectedModelLocal: {},
      customTitleVisible: false,
      nodeConfigVisible: false,
      nodeConfigType: '',
      configVisible: false,
      fileList: [],
      formLoading:false
    };
  }

  static getDerivedStateFromProps(props, state) {
    // 切换导致数据清空
    if (state.selectedModelLocal.id !== props.selectedModel.id) {
      const {properties = {}} = (props.selectedModel || {}).model || {};
      const {eventConfig = [], attachInfos= []} = properties;
      props.form.resetFields();
      if (
        !props.selectedModel.model.properties.formFields &&
        props.selectedModel.model.properties.formname
      ) {
        props
          .dispatch({
            type: "FormSelectModel/FormSetupInfo",
            payload: {formId: props.selectedModel.model.properties.formId},
          })
          .then(({errCode, datas}) => {
            if (errCode === 0) {
              // this.getDatas(datas);
              if (!datas) {
                message.warn("此表单数据为空");
              }
              props.setFilList(datas);
            }
          });
      }
      props.setFilList(props.selectedModel.model.properties.formFields);
      return {
        selectedModelLocal: props.selectedModel,
        eventConfigData: eventConfig,
        fileList: attachInfos.map(v => {
          return {...v, name: v.fileName}
        }),
      };
    }
    return null;
  }

  componentDidMount() {
    const {selectedModel = {}} = this.props;
    const {properties = {}} = (selectedModel || {}).model || {};
    const {eventConfig = []} = properties;
    this.setState({
      eventConfigData: eventConfig,
    });
  }

  // componentDidUpdate(prevProps) {
  //   if (this.props.quanXian !== prevProps.quanXian) {
  //     const { quanXian } = this.props;
  //     const { ziduanList, wjList } = this.fenlei(quanXian);
  //     this.setState({
  //       ziduanList: ziduanList,
  //       wjList: wjList,
  //     });
  //     console.log(ziduanList);
  //   }
  // }

  // fenlei(quanXian) {
  //   let ziduanList = [];
  //   let wjList = [];
  //   quanXian.map(item => {
  //     console.log(this);
  //     if (item.fieldType === 0) {
  //       ziduanList?.push(item);
  //       return true;
  //     } else {
  //       wjList.push(item);
  //       return true;
  //     }
  //   });
  //   return { ziduanList, wjList };
  // }

  // eslint-disable-next-line react/no-deprecated
  componentWillReceiveProps(nextPops) {
    const {selectedModel = {}, form} = this.props;

    if (nextPops.selectedModel.id !== selectedModel.id) {
      const {properties = {}} = (nextPops.selectedModel || {}).model || {};
      const {eventConfig = [] } = properties;
      this.setState({
        eventConfigData: eventConfig,
      });
      form.resetFields();
    }
  }

  handleChange = (name, value, isEmpty = false) => {
    const obj = {};
    const newValue = value || "empty";
    obj[name] = isEmpty ? value : newValue;
    this.setState({
      ...obj,
    });
  };

  testConnection = () => {
    const {dispatch, selectedModel = {}} = this.props;
    const {properties = {}} = (selectedModel || {}).model || {};
    const configUrl =
      properties.eventConfig && JSON.stringify(properties.eventConfig) !== "{}"
        ? JSON.parse(properties.eventConfig.config).url
        : "";
    dispatch({
      type: "FlowChart/testConnection",
      payload: {url: configUrl},
    }).then(({errCode, errMsg, datas}) => {
      if (errCode === 0 && datas) {
        this.openNotificationWithIcon("success", "", "测试连接成功");
      } else if (!datas) {
        this.openNotificationWithIcon("error", "", "测试连接失败");
      } else {
        this.openNotificationWithIcon("error", "", errMsg);
      }
    });
  };

  testEvent=()=>{
    const {
      form,
      testEvent,
      checkInputUrl,
    }= this.props;
    const { confirm } = Modal;
    this.setState({
      formLoading: true
    })
    form.validateFields((err, values) => {
      if (!err) {
        checkInputUrl(values.config).then((res1) => {
          console.log(JSON.stringify(res1));
          if(res1.errCode === 0) {
            //message.success("您输入的url："+values.config+"合法"+JSON.stringify(res1));
            testEvent(values).then((res)=>{
              const message1=res.errMsg;
              this.setState({
                formLoading: false
              })
              confirm({
                title: '接口返回数据',
                content:
                  <Form>
                    <Form.Item label="接口返回Message" >
                      <TextArea value={message1} />
                    </Form.Item>
                    <Form.Item label="接口返回datas" >
                      <TextArea value={JSON.stringify(res.datas)} />
                    </Form.Item>
                  </Form>,
                okText: '确定',
                cancelText: '取消',
              });
            })
          }else{
            message.error("url不合法，请重新输入");
          }

        })
      }
  })
  };

  handleFormOk = e => {
    if (e && e.preventDefault) e.preventDefault();
    const {
      form,
      selectedModel = {},
      handleChangeProperties2: propsHandleChangeProperties2,
      checkInputUrl,
    } = this.props;
    const handleChangeProperties2 = (...args) => {
      propsHandleChangeProperties2(...args);
      this.forceUpdate();
    };
    const {eventConfigData} = this.state;
    form.validateFields((err, values) => {
      if (!err) {
        checkInputUrl(values.config).then((res) => {
          if(res.errCode === 0) {
            this.openNotificationWithIcon("success", "", res.datas);
            if (values.key) {
              // 编辑
              // eslint-disable-next-line array-callback-return
              eventConfigData.map(item => {
                if (item.key === values.key) {
                  item.name = values.name;
                  item.config = {url: values.config};
                  item.eventType = values.eventType;
                  item.callMethod = values.callMethod;
                  item.requestBody = values.requestBody;
                  item.desc = values.desc;
                  item.callbackParam = values.callbackParam;
                }
              });
              this.setState({eventConfigData});
            } else {
              // 新增
              values.key = getUuid();
              values.config = {url: values.config};
              eventConfigData.push(values);
              this.setState(
                {
                  eventConfigData,
                },
                () => {
                  handleChangeProperties2(
                    "eventConfig",
                    eventConfigData,
                    selectedModel.model,
                    selectedModel.shape,
                    false,
                  );
                },
              );
            }
          }
        })
        form.resetFields();
      }
    });
  };

  handleDelete = record => {
    const {eventConfigData} = this.state;
    const {
      selectedModel = {},
      handleChangeProperties2: propsHandleChangeProperties2,
    } = this.props;
    const handleChangeProperties2 = (...args) => {
      propsHandleChangeProperties2(...args);
      this.forceUpdate();
    };
    const newEventConfig = eventConfigData.filter(v => v.key !== record.key);
    this.setState({eventConfigData: newEventConfig}, () => {
      handleChangeProperties2(
        "eventConfig",
        newEventConfig,
        selectedModel.model,
        selectedModel.shape,
        false,
      );
    });
  };

  handleEdit = record => {
    const {form} = this.props;
    const config = record.config.url;
    form.setFieldsValue(record);
    form.setFieldsValue({config});
  };

  // 权限勾选   点击勾选 如果是初始化数据就保持不变
  onReCommentChecked = (value, record, e, name) => {
    // const {selectedModel } = this.props
    const {filList, setFilList} = this.props;
    if (filList.formKey) {
      // eslint-disable-next-line react/destructuring-assignment
      const arr = this.props.selectedModel.model.properties.formFields; // 初始化拿到的数据
      const {filListLocal} = this.state; // 拷贝的数据
      // eslint-disable-next-line no-unused-vars
      let tempList;
      if (filList.formFields?.length > 0) {
        tempList = filList;
      } else if (arr?.length > 0) {
        tempList = arr;
      } else if (filListLocal?.length > 0) {
        tempList = filListLocal;
      }
      const tempArr = filList.formFields.map(item => {
        if (item.fieldId === record.fieldId) {
          return {...item, [name]: e.target.checked === true ? 1 : 0};
        }
        return item;
      });
      setFilList(tempArr);
      const {handleChangeProperties, selectedModel} = this.props;
      handleChangeProperties(
        "formFields",
        tempArr,
        selectedModel.model,
        selectedModel.shape,
        false,
      );
    } else {
      // eslint-disable-next-line react/destructuring-assignment
      const arr = this.props.selectedModel.model.properties.formFields; // 初始化拿到的数据
      const {filListLocal} = this.state; // 拷贝的数据
      // eslint-disable-next-line no-unused-vars
      let tempList;
      if (filList?.length > 0) {
        tempList = filList;
      } else if (arr?.length > 0) {
        tempList = arr;
      } else if (filListLocal?.length > 0) {
        tempList = filListLocal;
      }
      const tempArr = filList.map(item => {
        if (item.fieldId === record.fieldId) {
          return {...item, [name]: e.target.checked === true ? 1 : 0};
        }
        return item;
      });
      setFilList(tempArr);
      const {handleChangeProperties, selectedModel} = this.props;
      handleChangeProperties(
        "formFields",
        tempArr,
        selectedModel.model,
        selectedModel.shape,
        false,
      );
    }
    // eslint-disable-next-line react/destructuring-assignment
  };

  emptys = () => {
    // eslint-disable-next-line react/destructuring-assignment
    this.props.setFilList([]);
  };

  openConfigModal = () => {
    this.setState({
      configVisible: true,
    })
  }

  handleCancel = () => {
    this.setState({
      configVisible: false,
    })
  };

  handleFileChange = info => {
    const {handleChangeProperties, selectedModel} = this.props;
    if (info.file.status === "done") {
      const { response = {} } = info?.file;
      const { errCode, errMsg } = response;
      if (errCode === 0) {
        message.success(`${info.file.name} 文件上传成功`);
      } else {
        message.error(errMsg);
      }
    } else if (info.file.status === "error") {
      message.error(`${info.file.name} 文件上传失败`);
    }
    const fileList = [...info.fileList].filter(v => {
      if (v.status !== "done") {
        return true;
      }
      if (v.response && v.response.success || v?.attachId) {
        return true;
      }
      return false;
    })
    this.setState({ fileList }, () => {
      handleChangeProperties(
        "attachInfos",
        fileList.map(v => {
          return {
            attachId: v?.response?.datas || v?.attachId,
            fileName: v?.name,
            serviceType: "1",
            uid: v?.uid,
            status: v?.status
          }
        }),
        selectedModel.model,
        selectedModel.shape,
        false,
      )}
    );
  };

  handleFileRemove = (file) => {
    const { dispatch } = this.props;
    const { fileList } = this.state;
    const newFileList = fileList.filter(item => item.uid !== file.uid) || [];
    this.setState({ fileList: newFileList }, () => {
      dispatch({
        type: 'FlowChart/deleteFile', payload: {attachId: file?.attachId, fileName: file.name, serviceType: 1},
      })
    });
  };

  handleDownload = (file) => {
    const a = document.createElement("a");
    a.href = `/flow-platform/oss/downloadFile?attachId=${file?.attachId}&fileName=${file.name}&serviceType=1`;
    a.setAttribute("download", file.name);
    document.body.appendChild(a);
    a.click();
    document.body.removeChild(a);
  };


  render() {
    const {
      activeKey,
      label: inputingLabel,
      description: descriptionLabel,
      overrideid,
      // url: urlLabel,
      eventConfigData,
      // filliuList,
      // filListLocal,
      customTitleVisible,
      nodeConfigType,
      nodeConfigVisible,
      configVisible,
      fileList,
      formLoading
    } = this.state;
    const {
      appId,
      changeModelVariableRef,
      // modelVariableRef,
      checkOverrideid,
      disable,
      dispatch,
      modelVariables = [],
      selectedModel = {},
      handleChangeProperties: propsHandleChangeProperties,
      // handleChangeMultiProperties: propsHandleChangeMultiProperties,
      handleformVisible,
      handleFormSelect,
      handleGraphChange,
      // handleHttpCallbackVisible,
      handleUsersSelect,
      handleDeleteUsers,
      handleRelationSelect,
      handleDeleteRelation,
      modelForms,
      formId,
      modelProperties,
      // updateModelForms,
      form,
      // quanXian,
      drawData,
      filList,
      customTitleList,
      handleChangeProperties2: propsHandleChangeProperties2,
    } = this.props;
    const {getFieldDecorator} = form;
    const {properties = {}} = (selectedModel || {}).model || {};
    const {timeoutSetting = {}, copyTo, customTitle = []} = properties;
    const {
      formkeydefinition = "",
      formname = "",
      description: propertyDescription = "",
      multiinstance_condition = "", // eslint-disable-line
      nodeAuth = {
        urge: {
          switch: false,
          urgeStartTime: undefined,
          urgeInterval: undefined,
        },
        // callback: false,
        // signIn: true,
        // addSignature: false,
        // transfer: false,
        // circulation: false,
        // delay: false,
        // stop: false,
        // rollback: false,
        terminateProcess: false,
        cancel: false,
        signIn: true,
        addSignature: false,
        delegate: false,
        transfer: false,
        // rollback: false,
        rollbackToPre: false,
        rollbackToFirst: false,
        rollbackToAny: false,
        takeBack: false,
        reissue: false,
        nextNodeHandler: false,
        readHandle: false,
        veto: false,
      },
      candidateUsers = [],
      // formFields = [],
    } = properties;

    // let qianList = filList || (filListLocal?.length > 0) ? filListLocal :  formFields
    // console.log(filList)
    const qianList = filList || [];
    if (qianList?.formKey) {
      if (qianList?.formFields?.length > 0) {
        // eslint-disable-next-line vars-on-top
        var ziduanList = qianList?.formFields.filter(item => {
          return item.fieldType === 0;
        });
        // eslint-disable-next-line vars-on-top
        var wjList = qianList?.formFields.filter(item => {
          return item.fieldType === 1;
        });
      } else {
        // message.warn("此表单数据为空");
      }
    } else if (qianList?.length > 0) {
        // eslint-disable-next-line no-redeclare
        var ziduanList = qianList?.filter(item => {
          return item.fieldType === 0;
        });
        // eslint-disable-next-line no-redeclare
        var wjList = qianList?.filter(item => {
          return item.fieldType === 1;
        });
      } else {
        // message.warn("此表单数据为空");
      }

    /*
    不用设置节点的变量
    const { timeoutSetting = {}, nodeVariables = [] } = properties;

    const formatedNodeVariables = formatFormParameters(nodeVariables);
    */

    const handleChangeProperties = (...args) => {
      propsHandleChangeProperties(...args);
      this.forceUpdate();
    };
    const labelValue =
      inputingLabel === "empty" ? "" : inputingLabel || selectedModel.label;
    const description =
      descriptionLabel === "empty"
        ? ""
        : descriptionLabel || propertyDescription;
    const overrideidVal =
      overrideid === "empty" ? "" : overrideid || properties.overrideid;
    // const configUrl =
    //   properties.eventConfig && JSON.stringify(properties.eventConfig) !== "{}"
    //     ? JSON.parse(properties.eventConfig.config).url
    //     : "";
    // const url = urlLabel === "empty" ? "" : urlLabel || configUrl;
    // const { isEmpty = true, url: httpCallbackUrl } = httpcallbackData;
    // const showHttpCallback = !isEmpty;
    const {subject, predicate, object} = extractHQCondition(
      multiinstance_condition,
    );
    const maxNum = candidateUsers.length;

    const authData = authNodes.map(node => {
      if (node.key === "urge") {
        return {
          ...node,
          status: nodeAuth[node.key].switch,
        };
      }
      return {
        ...node,
        status: !!nodeAuth[node.key],
      };
    });
    const columns = [
      {
        title: "节点权限名称",
        key: "name",
        render: record => (
          <div style={{display: "flex", flexDirection:'row', justifyContent:'flex-start', alignItems:'center'}}>
            <span style={{paddingRight: 8}}>{record.name}</span>
            <Tooltip placement="topLeft" title={record.desc}>
              <Icon
                style={{cursor: "pointer"}}
                theme="filled"
                type="question-circle"
              />
            </Tooltip>
            {record?.config ? (
              <Button
                type="link"
                size='small'
                onClick={() => this.setState({nodeConfigType: record?.key, nodeConfigVisible: true})}
              >
                {record?.config}
              </Button>
            ) : null}
            {/* <span
              style={{ marginLeft: 8, color: '#1890ff', cursor: 'pointer' }}
              onClick={this.openConfigModal}
            >
              {record.key === 'rollback' ? '配置' : ''}
            </span> */}
          </div>
        ),
      },
      {
        title: "状态",
        key: "status",
        render: record => (
          <div
            style={{
              display: "flex",
              justifyContent: "space-between",
              width: 100,
            }}
          >
            <span>{record.status ? "启用" : "不启用"}</span>
            <Switch
              checked={record.status}
              onChange={value => {
                const newData = {
                  ...nodeAuth,
                };
                if (record.key === "urge") {
                  newData.urge = {
                    ...nodeAuth.urge,
                    switch: value,
                  };
                } else {
                  newData[record.key] = value;
                }
                handleChangeProperties(
                  "nodeAuth",
                  newData,
                  selectedModel.model,
                  selectedModel.shape,
                  false,
                );
              }}
            />
          </div>
        ),
      },
    ];

    const eventColumns = [
      {
        title: "事件名称",
        dataIndex: "name",
        key: "name",
        align: "center",
      },
      {
        title: "事件url",
        dataIndex: "config",
        key: "config",
        align: "center",
        render: (text, record) => <span>{record.config.url}</span>,
      },
      {
        title: "事件类型",
        dataIndex: "eventType",
        key: "eventType",
        align: "center",
        render: (text, record) => (
          <span>
            {record.eventType === ""
              ? "-"
              : record.eventType === "TASK_CREATED"
                ? "流程前置"
                : "流程后置"}
          </span>
        ),
      },
      {
        title: "操作",
        align: "center",
        render: (text, record) => (
          <div>
            <a
              onClick={e => {
                e.preventDefault();
                this.handleEdit(record);
              }}
              style={{marginRight: "10px"}}
            >
              编辑
            </a>
            <Popconfirm
              placement="left"
              title={`确定删除事件：${record.name}?`}
              onConfirm={() => {
                this.handleDelete(record);
              }}
              okText="确定"
              cancelText="取消"
            >
              <a
                onClick={e => {
                  e.preventDefault();
                }}
              >
                删除
              </a>
            </Popconfirm>
          </div>
        ),
      },
    ];
    /*
    const ExpandRow = (record) => (
      <div className={udStyles.expandRow}>
        {record.status}
        <div className={udStyles.expandRowItem}>
          发起后可催办时间：
          <Select
            defaultValue={urgeStartTime}
            style={{ width: 130 }}
            onChange={(value) => {
              const newData = {
                ...nodeAuth,
                urge: {
                  ...nodeAuth.urge,
                  urgeStartTime: value,
                },
              };
              handleChangeProperties(
                "nodeAuth",
                newData,
                selectedModel.model,
                selectedModel.shape,
                false,
              );
            }}
          >
            {urgeStartTimeList.map((v) => (
              <Option key={v.value} value={v.value}>
                {v.label}
              </Option>
            ))}
          </Select>
        </div>
        <div className={udStyles.expandRowItem}>
          可催办间隔时间：
          <Select
            defaultValue={urgeInterval}
            style={{ width: 130 }}
            onChange={(value) => {
              const newData = {
                ...nodeAuth,
                urge: {
                  ...nodeAuth.urge,
                  urgeInterval: value,
                },
              };
              handleChangeProperties(
                "nodeAuth",
                newData,
                selectedModel.model,
                selectedModel.shape,
                false,
              );
            }}
          >
            {urgeIntervalList.map((v) => (
              <Option key={v.value} value={v.value}>
                {v.label}
              </Option>
            ))}
          </Select>
        </div>
      </div>
    );
    */

    const canChangeForm = !isFormReferenced(formId, modelForms);

    const handleCustomTitle = () => {
      this.setState({customTitleVisible: false});
    }

    let customTitleStr = ''
    customTitle.map(item => {
      customTitleStr = `${customTitleStr}  ${item.titleName}`
    })

    const uploadProps = {
      action: "/flow-platform/oss/uploadFiles",
      data: { type: 'file', name: 'file', serviceType: '1' },
      multiple: true,
      onChange: this.handleFileChange,
      onRemove: this.handleFileRemove,
      onDownload: this.handleDownload,
      onPreview: this.handleDownload,
      showUploadList: {
        showPreviewIcon: true,
        showRemoveIcon: true,
        showDownloadIcon: true,
      },
    };

    return (
      <>
        <div className={styles.headTitle}>任务</div>
        <div
          className={`block-container ${styles.content} ${udStyles.container}`}
        >
          <Tabs
            activeKey={activeKey}
            onChange={key => this.setState({activeKey: key})}
            size="small"
          >
            <TabPane tab="属性" key="1">
              {/* <div className={`${styles.content_item} ${styles.hq_item}`}> */}

              <div className={styles.content_item}>
                <span className={styles.item_label}>节点名称：</span>
                <Input
                  disabled={disable}
                  placeholder="请输入"
                  maxLength={30}
                  value={labelValue}
                  onChange={ev => this.handleChange("label", ev.target.value)}
                  onBlur={ev => {
                    handleGraphChange("label", ev.target.value, false);
                    this.handleChange("label", "", true);
                    handleChangeProperties(
                      "label",
                      ev.target.value,
                      selectedModel.model,
                      selectedModel.shape,
                      false,
                    );
                  }}
                />
              </div>

              <div className={styles.content_item}>
                <span className={styles.item_label}>
                  自定义
                  <br />
                  标题：
                </span>

                <div
                  className={styles.item_custom_title}
                  onClick={() => {
                    if (!disable) {
                      this.setState({customTitleVisible: true})
                    }
                  }}
                >
                  {customTitleStr}
                </div>

              </div>

              <div className={styles.content_item}>
                <span className={styles.item_label}>节点编码：</span>
                <Input
                  disabled={disable}
                  maxLength={30}
                  placeholder="请输入"
                  value={overrideidVal}
                  onChange={ev =>
                    this.handleChange("overrideid", ev.target.value)
                  }
                  onBlur={ev => {
                    checkOverrideid(ev);
                    this.handleChange("overrideid", "", true);
                    handleChangeProperties(
                      "overrideid",
                      ev.target.value,
                      selectedModel.model,
                      selectedModel.shape,
                      false,
                    );
                  }}
                />
              </div>
              <div className={styles.content_item}>
                <span className={styles.item_label}>节点说明：</span>
                <TextArea
                  disabled={disable}
                  placeholder="请输入说明"
                  maxLength={100}
                  value={description}
                  onChange={ev =>
                    this.handleChange("description", ev.target.value)
                  }
                  onBlur={ev => {
                    handleChangeProperties(
                      "description",
                      ev.target.value,
                      selectedModel.model,
                      selectedModel.shape,
                      false,
                    );
                    this.handleChange("description", "", true);
                  }}
                />
              </div>
              {/* <div className={styles.content_item}>
                <span className={styles.item_label}>事件通知：</span>
                <span style={{ width: "100%" }}>
                  <TextArea
                    disabled={disable}
                    placeholder="请输入事件通知url"
                    // maxLength={250}
                    value={url}
                    onChange={(ev) => this.handleChange("url", ev.target.value)}
                    onBlur={(ev) => {
                      let eventConfig = {};
                      if (ev.target.value) {
                        const config = JSON.stringify({ url: ev.target.value });
                        eventConfig = {
                          eventType: "TASK_COMPLETED",
                          config,
                        };
                      }
                      handleChangeProperties(
                        "eventConfig",
                        eventConfig,
                        selectedModel.model,
                        selectedModel.shape,
                        false,
                      );
                      this.handleChange("url", "", true);
                    }}
                  />
                  <Button
                    onClick={this.testConnection}
                    style={{ marginTop: "8px" }}
                    disabled={!url}
                  >
                    测试
                  </Button>
                </span>
              </div> */}
            </TabPane>
            <TabPane tab="表单设置" key="2">
              <div
                className={`${styles.user__select} ${disable ? styles.user__select_disable : ""
                }`}
                onClick={() => {
                  if (canChangeForm) {
                    handleformVisible(true);
                  } else {
                    this.openNotificationWithIcon(
                      "warning",
                      "",
                      `此表单被流程或节点变量引用，请删除变量后再进行修改`,
                    );
                  }
                }}
                style={{position: "relative", paddingRight: 15}}
              >
                {formkeydefinition ? (
                  <>
                    <span
                      className={styles.placeholder}
                      style={{marginTop: 4, color: "rgba(0,0,0,.65)"}}
                    >
                      {formname}
                    </span>
                    {canChangeForm ? (
                      <Zcon
                        type="close"
                        style={{position: "absolute", top: 8}}
                        onClick={e => {
                          e.stopPropagation();
                          handleFormSelect("");
                          this.emptys();
                        }}
                      />
                    ) : null}
                  </>
                ) : (
                  <span className={styles.placeholder}>请选择</span>
                )}
              </div>
              {ziduanList?.length > 0 ? (
                <>
                  <div value="2" style={{margin: '8px auto'}}>字段权限</div>
                  <div>
                    <Table
                      columns={[
                        {
                          title: "字段ID",
                          dataIndex: "fieldId",
                          ellipsis: true,
                          render: v => (
                            <span className={styles.shortCell} title={v}>
                              {v}
                            </span>
                          ),
                        },
                        {
                          title: "字段名称",
                          dataIndex: "fieldName",
                          ellipsis: true,
                          render: v => (
                            <span className={styles.shortCell} title={v}>
                              {v}
                            </span>
                          ),
                        },
                        {
                          title: "可见",
                          dataIndex: "visiable",
                          ellipsis: true,
                          render: (value, record) => (
                            <Checkbox
                              onChange={e =>
                                this.onReCommentChecked(
                                  value,
                                  record,
                                  e,
                                  "visiable",
                                )
                              }
                              checked={record.visiable}
                            />
                          ),
                        },
                        {
                          title: "可编辑",
                          dataIndex: "edit",
                          ellipsis: true,
                          render: (value, record) => (
                            <Checkbox
                              onChange={e =>
                                this.onReCommentChecked(
                                  value,
                                  record,
                                  e,
                                  "edit",
                                )
                              }
                              checked={record.edit}
                            />
                          ),
                        },
                        {
                          title: "是否必填",
                          dataIndex: "required",
                          render: (value, record) => (
                            <Checkbox
                              className="required"
                              onChange={e =>
                                this.onReCommentChecked(
                                  value,
                                  record,
                                  e,
                                  "required",
                                )
                              }
                              checked={record.required}
                            />
                          ),
                        },
                      ]}
                      dataSource={ziduanList}
                      pagination={{
                        pageSize: 5,
                      }}
                      size="small"
                    />
                  </div>
                </>
              ) : null}
              {wjList?.length > 0 ? (
                <>
                  {" "}
                  <div value="2" style={{marginBottom: '8px'}}>文件权限</div>
                  <div>
                    <Table
                      columns={[
                        {
                          title: "字段ID",
                          dataIndex: "fieldId",
                          ellipsis: true,
                          render: v => (
                            <span className={styles.shortCell} title={v}>
                              {v}
                            </span>
                          ),
                        },
                        {
                          title: "字段名称",
                          dataIndex: "fieldName",
                          ellipsis: true,
                          render: v => (
                            <span className={styles.shortCell} title={v}>
                              {v}
                            </span>
                          ),
                        },
                        {
                          title: "可下载",
                          dataIndex: "download",
                          ellipsis: true,
                          render: (value, record) => (
                            <Checkbox
                              onChange={e =>
                                this.onReCommentChecked(
                                  value,
                                  record,
                                  e,
                                  "download",
                                )
                              }
                              checked={record.download}
                            />
                          ),
                        },
                        {
                          title: "可增减",
                          dataIndex: "incOrDec",
                          ellipsis: true,
                          render: (value, record) => (
                            <Checkbox
                              onChange={e =>
                                this.onReCommentChecked(
                                  value,
                                  record,
                                  e,
                                  "incOrDec",
                                )
                              }
                              checked={record.incOrDec}
                            />
                          ),
                        },
                        {
                          title: "是否必填",
                          dataIndex: "required",
                          ellipsis: true,
                          render: (value, record) => (
                            <Checkbox
                              onChange={e =>
                                this.onReCommentChecked(
                                  value,
                                  record,
                                  e,
                                  "required",
                                )
                              }
                              checked={record.required}
                            />
                          ),
                        },
                      ]}
                      dataSource={wjList}
                      pagination={{
                        pageSize: 5,
                      }}
                      size="small"
                    />
                  </div>
                </>
              ) : null}
            </TabPane>
            <TabPane tab="办理人设置" key="3">
              <React.Fragment>
                {/*
                <div className={styles.content_item}>
                  <span className={styles.item_label}>办理人：</span>
                </div>
                */}
                <UserTaskSelectorRadio
                  appId={appId}
                  changeModelVariableRef={changeModelVariableRef}
                  disable={disable}
                  dispatch={dispatch}
                  handleChangeProperties={handleChangeProperties}
                  handleDeleteUsers={(...args) => {
                    handleDeleteUsers(...args);
                    this.forceUpdate();
                  }}
                  handleUsersSelect={(...args) => {
                    handleUsersSelect(...args);
                    this.forceUpdate();
                  }}
                  handleRelationSelect={(...args) => {
                    handleRelationSelect(...args);
                    this.forceUpdate();
                  }}
                  handleDeleteRelation={(...args) => {
                    handleDeleteRelation(...args);
                    this.forceUpdate();
                  }}
                  handleNoticeTypeChange={(v, indexes) => {
                    const {noticeChannel: _nc = []} = properties;
                    const noticeChannel = [..._nc];
                    // eslint-disable-next-line
                    indexes.forEach(i => (noticeChannel[i] = v));
                    handleChangeProperties(
                      "noticeChannel",
                      noticeChannel,
                      selectedModel.model,
                      selectedModel.shape,
                      false,
                    );
                  }}
                  modelVariables={modelVariables}
                  selectedModel={selectedModel}
                  stackRadios
                />
              </React.Fragment>
              <Divider dashed />
              <ForcePickComment
                onValueUpdate={(key, value) =>
                  handleChangeProperties(
                    key,
                    value,
                    selectedModel.model,
                    selectedModel.shape,
                    false,
                  )
                }
                changeModelVariableRef={changeModelVariableRef}
                codeRefModel={selectedModel}
                dispatch={dispatch}
                disable={disable}
                modelVariables={modelVariables}
                timeoutSetting={timeoutSetting}
              />
              <AutoGetLastCandidate
                onValueUpdate={(key, value) =>
                  handleChangeProperties(
                    key,
                    value,
                    selectedModel.model,
                    selectedModel.shape,
                    false,
                  )
                }
                changeModelVariableRef={changeModelVariableRef}
                codeRefModel={selectedModel}
              />
              <IsChooseCandidateUser
                onValueUpdate={(key, value) =>
                  handleChangeProperties(
                    key,
                    value,
                    selectedModel.model,
                    selectedModel.shape,
                    false,
                  )
                }
                changeModelVariableRef={changeModelVariableRef}
                codeRefModel={selectedModel}
              />
              <IsCleanCandidateUserSetting
                onValueUpdate={(key, value) =>
                  handleChangeProperties(
                    key,
                    value,
                    selectedModel.model,
                    selectedModel.shape,
                    false,
                  )
                }
                changeModelVariableRef={changeModelVariableRef}
                codeRefModel={selectedModel}
              />
              <IsConfigCheckPoint
                onValueUpdate={(key, value) =>
                  handleChangeProperties(
                    key,
                    value,
                    selectedModel.model,
                    selectedModel.shape,
                    false,
                  )
                }
                changeModelVariableRef={changeModelVariableRef}
                codeRefModel={selectedModel}
              />
            </TabPane>
            <TabPane tab="高级设置" key="4">
              <div className={styles.content_item} style={{display: "block"}}>
                <div className={styles.hq_item}>
                  <Checkbox
                    // disabled={this.hqdisable || disable}
                    disabled={disable}
                    onChange={e => {
                      const {checked} = e.target;
                      const multiinstanceType = checked ? "Parallel" : "None";
                      // const type = selectedModel.model.properties.candidateUsers.filter(
                      //   (item) => item.type === "INIT",
                      // );
                      // if (type.length > 0) {
                      //   // console.log(1);
                      //   this.openNotificationWithIcon(
                      //     "warning",
                      //     "",
                      //     "已选择办理人设置中相对关系—流程发起人，不可设置会签任务",
                      //   );
                      //   return;
                      // }
                      handleChangeProperties(
                        "multiinstance_type",
                        multiinstanceType,
                        selectedModel.model,
                        selectedModel.shape,
                        false,
                      );
                      handleChangeProperties(
                        "multiinstance_condition",
                        defaultCondition,
                        selectedModel.model,
                        selectedModel.shape,
                        false,
                      );
                      if (checked) {
                        handleChangeProperties(
                          "mustExpress",
                          '1',
                          selectedModel.model,
                          selectedModel.shape,
                          false,
                        );
                      }
                      // console.log(selectedModel.model);
                      if (!checked) {
                        handleChangeProperties(
                          "multiinstance_condition",
                          "",
                          selectedModel.model,
                          selectedModel.shape,
                          false,
                        );
                      }
                    }}
                    checked={
                      properties.multiinstance_type === "None" ? unCheck : check
                    }
                  >
                    会签任务
                  </Checkbox>
                  {/* {properties.multiinstance_type !== "None" && (
                    <div className={styles.hq_radio}>
                      <RadioGroup
                        onChange={(e) => {
                          handleChangeProperties(
                            "multiinstance_type",
                            e.target.value,
                            selectedModel.model,
                            selectedModel.shape,
                            false,
                          );
                        }}
                        value={properties.multiinstance_type}
                        disabled
                      >
                        <Radio value="Parallel">并行</Radio>
                        <Radio value="Sequential">串行</Radio>
                      </RadioGroup>
                    </div>
                  )} */}
                </div>
                {properties.multiinstance_type !== "None" && (
                  <div className={styles.hq_item}>
                    <div className={styles.hq_text}>会签方式</div>
                    <Select
                      value={properties.multiinstance_type}
                      // disabled={disable}
                      onChange={value => {
                        handleChangeProperties(
                          "multiinstance_type",
                          value,
                          selectedModel.model,
                          selectedModel.shape,
                          false,
                        );
                      }}
                      placeholder="请选择会签方式"
                      style={{width: 180}}
                    >
                      <Option value="Sequential">多人顺序</Option>
                      <Option value="Parallel">多人并行</Option>
                    </Select>
                  </div>
                )}
                {properties.multiinstance_type !== "None" && (
                  <>
                    <div className={styles.hq_item}>
                      <div className={styles.hq_text}>通过方式</div>
                      <Select
                        value={subject}
                        disabled={disable}
                        onChange={value => {
                          const {multiinstance_condition: c = ""} =
                          selectedModel.model.properties || {};
                          const {predicate: p = ">="} = extractHQCondition(c);
                          const newCondition = `\${${value}${p}0}`;
                          handleChangeProperties(
                            "multiinstance_condition",
                            newCondition,
                            selectedModel.model,
                            selectedModel.shape,
                            false,
                          );
                        }}
                        placeholder="请选择会签条件"
                        style={{width: 180}}
                      >
                        <Option value="nrOfPassInstances">同意人数</Option>
                        <Option value="nrOfPassInstances/nrOfInstances">
                          同意比例
                        </Option>
                      </Select>
                    </div>
                    <div className={styles.hq_item}>
                      <div className={styles.hq_text}>
                        {subject === "nrOfPassInstances/nrOfInstances"
                          ? "同意比例"
                          : "同意人数"}
                      </div>
                      <Select
                        value={predicate}
                        disabled={disable || !subject}
                        onChange={v => {
                          const {multiinstance_condition: c = ""} =
                          selectedModel.model.properties || {};
                          const {subject: s, object: o} = extractHQCondition(
                            c,
                          );
                          const newCondition = `\${${s}${v}${o}}`;
                          handleChangeProperties(
                            "multiinstance_condition",
                            newCondition,
                            selectedModel.model,
                            selectedModel.shape,
                            false,
                          );
                        }}
                        placeholder="请选择"
                        style={{width: 88}}
                      >
                        <Option value=">=">&gt;=</Option>
                        {subject === "nrOfPassInstances/nrOfInstances" ||
                          maxNum > 0 ? (
                            <Option value=">">&gt;</Option>
                        ) : null}
                      </Select>
                      &nbsp;
                      {/* &nbsp; &nbsp; */}
                      <InputNumber
                        disabled={disable || !subject}
                        maxLength={15}
                        value={object}
                        // {...(subject === "nrOfPassInstances"
                        //   ? { precision: 0, min: 0, max: predicate === '>' ? maxNum - 1 : maxNum }
                        //   : { min: 0, max: 100 })}
                        onChange={v => {
                          const {multiinstance_condition: c = ""} =
                          selectedModel.model.properties || {};
                          const {
                            subject: s,
                            predicate: p,
                          } = extractHQCondition(c);
                          const newCondition = `\${${s}${p}${(s || "").indexOf("/") > 0
                            ? formatPercentValue(v / 100, 4)
                            : v
                          }}`;
                          handleChangeProperties(
                            "multiinstance_condition",
                            newCondition,
                            selectedModel.model,
                            selectedModel.shape,
                            false,
                          );
                        }}
                        placeholder="请输入"
                      />
                      &nbsp; &nbsp;
                      {(subject || "").indexOf("/") > -1 ? "%" : null}
                    </div>
                  </>
                )}
                {properties.multiinstance_type !== "None" && (
                  <div style={{marginTop: 10}}>
                    <Checkbox
                      onChange={e => {
                        const {checked} = e.target;
                        const oneVoteVetoType = checked ? 1 : "";
                        handleChangeProperties(
                          "oneVoteVetoType",
                          oneVoteVetoType,
                          selectedModel.model,
                          selectedModel.shape,
                          false,
                        );
                        if (!checked) {
                          handleChangeProperties(
                            "multiinstance_condition",
                            "",
                            selectedModel.model,
                            selectedModel.shape,
                            false,
                          );
                        }
                      }}
                      checked={
                        properties.oneVoteVetoType === 1 ? check : unCheck
                      }
                    >
                      一票否决
                    </Checkbox>
                    <Tooltip placement="topLeft" title="只要有一个人不同意，那么该节点结束，其他人无需再审批">
                      <Icon
                        style={{cursor: "pointer"}}
                        theme="filled"
                        type="question-circle"
                      />
                    </Tooltip>
                  </div>
                )}
              </div>
              <div className={styles.content_item} style={{display: "block"}}>
                <Table
                  // bordered
                  columns={columns}
                  expandedRowKeys={["urge"]}
                  expandIcon={null}
                  // expandedRowRender={(record) =>
                  //   record.key === "urge" &&
                  //   record.status && <ExpandRow {...record} />
                  // }
                  dataSource={authData}
                  pagination={false}
                />
                {/* 当前需求去掉 HTTP请求回调 设置 */}
                {/* <span
                  className={styles.item_label}
                  style={{
                    paddingBottom: 0,
                    marginBottom: 8,
                  }}
                >
                  <Checkbox
                    checked={showHttpCallback}
                    disabled={disable}
                    onChange={(e) => {
                      const {
                        target: { checked },
                      } = e;
                      const newData = {
                        ...baseHttpCallback,
                        isEmpty: !checked,
                      };
                      handleChangeProperties(
                        "httpcallback",
                        newData,
                        selectedModel.model,
                        selectedModel.shape,
                        false,
                      );
                    }}
                  >
                    HTTP请求回调
                  </Checkbox>
                </span>
                {showHttpCallback ? (
                  <div
                    className={`${styles.user__select} ${
                      disable ? styles.user__select_disable : ""
                    }`}
                    onClick={() => {
                      handleHttpCallbackVisible(true);
                    }}
                  >
                    {httpCallbackUrl ? (
                      <span
                        className={styles.placeholder}
                        style={{ marginTop: 4, color: "rgba(0,0,0,.65)" }}
                      >
                        {httpCallbackUrl}
                      </span>
                    ) : (
                      <span className={styles.placeholder}>
                        点击后弹窗中设置
                      </span>
                    )}
                  </div>
                ) : null} */}
              </div>
              <RequiredComment
                onValueUpdate={(key, value) =>
                  handleChangeProperties(
                    key,
                    value,
                    selectedModel.model,
                    selectedModel.shape,
                    false,
                  )
                }
                // appId={appId}
                changeModelVariableRef={changeModelVariableRef}
                codeRefModel={selectedModel}
                dispatch={dispatch}
                disable={disable}
                modelVariables={modelVariables}
                timeoutSetting={timeoutSetting}
                // type="用户任务"
              />

              <BackComment
                onValueUpdate={(key, value) =>
                  handleChangeProperties(
                    key,
                    value,
                    selectedModel.model,
                    selectedModel.shape,
                    false,
                  )
                }
                // appId={appId}
                changeModelVariableRef={changeModelVariableRef}
                codeRefModel={selectedModel}
                dispatch={dispatch}
                disable={disable}
                modelVariables={modelVariables}
                timeoutSetting={timeoutSetting}
                // type="用户任务"
              />
              <VoteComment
                onValueUpdate={(key, value) =>
                  handleChangeProperties(
                    key,
                    value,
                    selectedModel.model,
                    selectedModel.shape,
                    false,
                  )
                }
                // appId={appId}
                changeModelVariableRef={changeModelVariableRef}
                codeRefModel={selectedModel}
                dispatch={dispatch}
                disable={disable}
                modelVariables={modelVariables}
                timeoutSetting={timeoutSetting}
                // type="用户任务"
              />
              <ManualSelectNextNode
                onValueUpdate={(key, value) =>
                  handleChangeProperties(
                    key,
                    value,
                    selectedModel.model,
                    selectedModel.shape,
                    false,
                  )
                }
                changeModelVariableRef={changeModelVariableRef}
                codeRefModel={selectedModel}
                dispatch={dispatch}
                disable={disable}
                modelVariables={modelVariables}
                timeoutSetting={timeoutSetting}
              />
              <CarbonCopySetting
                value={copyTo}
                onChange={newValue => {
                  let finalValue = newValue;
                  if (newValue) {
                    finalValue = finalValue.map(v => {
                      const {userCode, userName} = v || {};
                      return {
                        // 前端回显用的数据
                        ...v,
                        // 提交给后端用的数据
                        code: userCode,
                        name: userName,
                        type: "STA",
                      };
                    });
                  }
                  handleChangeProperties(
                    "copyTo",
                    finalValue,
                    selectedModel.model,
                    selectedModel.shape,
                    false,
                  );
                }}
              />
              <DuedateSetting
                appId={appId}
                changeModelVariableRef={changeModelVariableRef}
                codeRefModel={selectedModel}
                dispatch={dispatch}
                disable={disable}
                modelVariables={modelVariables}
                onValueUpdate={(key, value) =>
                  handleChangeProperties(
                    key,
                    value,
                    selectedModel.model,
                    selectedModel.shape,
                    false,
                  )
                }
                timeoutSetting={timeoutSetting}
                type="用户任务"
              />
            </TabPane>
            <TabPane tab="事件" key="5">
            <Spin spinning={formLoading} tip="加载中...，请稍等" size="large">
              <Form>
                <Form.Item>
                  {getFieldDecorator("key", {
                    initialValue: "",
                  })(<Input type="hidden" />)}
                </Form.Item>
                <Form.Item label="事件名称" {...formItemLayout}>
                  {getFieldDecorator("name", {
                    initialValue: "",
                    rules: [{required: true, message: "请输入事件名称"}],
                  })(<Input placeholder="请输入事件名称" />)}
                </Form.Item>
                <Form.Item label="事件url" {...formItemLayout}>
                  {getFieldDecorator("config", {
                    initialValue: "",
                    rules: [{required: true, message: "请输入事件url"}],
                  })(<Input placeholder="请输入事件url" />)}
                </Form.Item>
                <Form.Item label="requestBody" {...formItemLayout}>
                  {getFieldDecorator("requestBody", {
                    initialValue: "",
                  })(<TextArea
                    rows={4}
                    placeholder='{ &#13;&#10;
                    "流程实例Id":"${_processInstanceId}",&#13;&#10;
                    "发起人Id":"${_applyUserId}" &#13;&#10;
                  }'
                  />)}
                </Form.Item>
                <Form.Item label="事件触发时机" {...formItemLayout}>
                  {getFieldDecorator("eventType", {
                    initialValue: "",
                  })(
                    <Select placeholder="请选择事件触发时机">
                      <Option value="TASK_CREATED">流程前置</Option>
                      <Option value="TASK_COMPLETED">流程后置</Option>
                    </Select>,
                  )}
                </Form.Item>
                <Form.Item label="        " {...formItemLayout2} colon={false}>
                  {getFieldDecorator("callMethod", {
                    initialValue: "sync",
                  })(
                    <Radio.Group>
                      <Radio value="sync">同步</Radio>
                      <Radio value="async">异步</Radio>
                    </Radio.Group>,
                  )}
                </Form.Item>
                <Form.Item label="事件备注" {...formItemLayout}>
                  {getFieldDecorator("desc", {
                    initialValue: "",
                  })(
                    <TextArea
                      maxLength={200}
                      rows={4}
                      placeholder="请输入事件备注"
                    />,
                  )}
                </Form.Item>
                <Form.Item label="回调参数" {...formItemLayout}>
                  {getFieldDecorator("callbackParam", {
                    initialValue: "",
                  })(<Input placeholder="请输入回调参数" />)}
                </Form.Item>
                <Form.Item>
                <Button
                    onClick={this.testEvent}
                  >
                    测试
                  </Button>
                  <Button
                    type="primary"
                    onClick={this.handleFormOk}
                    style={{cssFloat: "right"}}
                  >
                    添加
                  </Button>
                </Form.Item>
              </Form>
              <Table
                style={{width: "350px"}}
                bordered
                columns={eventColumns}
                dataSource={eventConfigData}
                pagination={false}
                // scroll={{y:300}}
              />
            </Spin>
            </TabPane>
            <TabPane tab="对象" key="6">
              <UserTaskObject
                dispatch={dispatch}
                handleChangeProperties={handleChangeProperties}
                selectedModel={selectedModel}
                modelProperties={modelProperties}
              />
            </TabPane>
            <TabPane tab="文档" key="7">
            <div style={{paddingRight: '16px', paddingLeft: '16px'}}>
              <Upload {...uploadProps} fileList={fileList}>
                <Button>
                  <Icon type="upload" />上传文档
                </Button>
              </Upload>
            </div>
          </TabPane>
            {/*
            <TabPane tab="变量设置" key="5">
              <VariablesSetting
                disable={disable}
                value={formatedNodeVariables}
                modelVariableRef={modelVariableRef}
                openNotificationWithIcon={this.openNotificationWithIcon}
                modelForms={modelForms}
                onChange={(v) => {
                  handleChangeProperties(
                    "nodeVariables",
                    v,
                    selectedModel.model,
                    selectedModel.shape,
                    false,
                  );
                  updateModelForms();
                }}
              />
            </TabPane>
            */}
          </Tabs>
          <BackConfig
            visible={configVisible}
            onCancel={this.handleCancel}
            selectedModel={selectedModel}
            propsHandleChangeProperties2={propsHandleChangeProperties2}
          />
        </div>
        <CustomTitle
          customTitleVisible={customTitleVisible}
          handleOk={handleCustomTitle}
          handleCancel={() => this.setState({customTitleVisible: false})}
          dispatch={dispatch}
          customTitle={customTitle} // 回显数据
          customTitleList={customTitleList} // 原始数据
          handleChangeProperties={handleChangeProperties}
          selectedModel={selectedModel}
        />
        <NodeConfig
          dispatch={dispatch}
          handleChangeProperties={handleChangeProperties}
          selectedModel={selectedModel}
          nodeConfigType={nodeConfigType}
          nodeConfigVisible={nodeConfigVisible}
          drawData={drawData}
          handleClose={() => this.setState({nodeConfigVisible: false, nodeConfigType: ''})}
        />
      </>
    );
  }
}

export default UserTaskDetail;
